<template>
  <!--  团支书信息-->
  <template v-if="active===0">
    <el-table
        :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
        style="width: 100%">
      <el-table-column label="团支书基本信息">
        <el-table-column
            type="selection"
            width="55">
        </el-table-column>
        <el-table-column prop="account" label="账号">
        </el-table-column>
        <el-table-column prop="name" label="姓名">
        </el-table-column>
        <el-table-column prop="mng_class" label="所属班级">
        </el-table-column>
        <el-table-column prop="info" label="信息">
        </el-table-column>
        <el-table-column
            align="center">
<!--          <template #header>-->
<!--            <el-button type="primary" size="mini" icon="el-icon-search" @click="searchbox" circle></el-button>-->
<!--            &lt;!&ndash; 首先将要过渡的元素用transition包裹，并设置过渡的name &ndash;&gt;-->
<!--            <transition name="mybox">-->
<!--              <el-input-->
<!--                  class="sear"-->
<!--                  v-model="search"-->
<!--                  size="mini"-->
<!--                  v-show="searchshow"-->
<!--                  placeholder="输入关键字搜索"/>-->
<!--            </transition>-->
<!--          </template>-->
          <template #default="scope">
            <el-button
                size="mini"
                @click="handleView(scope.$index, scope.row);active=1">查看班级学生学分明细</el-button>
          </template>
        </el-table-column>
      </el-table-column>


    </el-table>
  </template>
<!--  团支书所属学生列表-->
  <template v-if="active===1"><credit-details-of-affiliated-students v-bind:tsId="tsId" @change="costPlannedAmountChange($event)"/></template>

</template>
<script lang="ts">
import {getCurrentInstance, reactive, ref, unref} from "vue";
import {getAllStudentInfo} from "@/network/admin/getAllStudentInfo";
import {ElMessage} from "element-plus";
import qs from "qs";
import {getLocalPartySecretary} from "@/network/admin/getLocalPartySecretary";
import {getLocalStudentAgreeAllApply} from "@/network/manager/getLocalStudentAgreeAllApply";
import StudentOfTheYouthLeaguePartySecretary from "@/views/admin/childComps/LeaguePartySecretaryInformationList/StudentOfTheYouthLeaguePartySecretary.vue";
import CreditDetailsOfAffiliatedStudents from "@/views/admin/childComps/StudentCreditDetails/CreditDetailsOfAffiliatedStudents.vue";
export default {
  name:'StudentCreditDetails',
  data(){
    return{
      direction: 'rtl',
      tableData: [{
        name:'lwj',
        gender:'男',
        id:'2020'
      },{
        name:'fk',
        id:'2021'
      }],
      search: '',
      active:0,
      tsId:''
    }
  },
  components:{
    CreditDetailsOfAffiliatedStudents,
    StudentOfTheYouthLeaguePartySecretary,
  },
  setup(){
    const ruleFormsss = ref(null);
    const {proxy}:any = getCurrentInstance();
    // const router=useRouter();
    // 定义变量

    const stateStudent = reactive({
      index: '',
      id: ''
    })

    function handleClose(done) {
      proxy.$confirm('确认？')
          .then(_ => {
            done();
          })
          .catch(_ => {
          });
    }


    const Admin_id=localStorage.getItem('AdminId')
    console.log(Admin_id)

    //获取团支书列表
    getLocalPartySecretary().then((result) => {
      //前后端连接成功
      console.log("前后端连接成功")
      const msg = result.data.msg;
      //打印返回结果状态，
      if (result.data.status == 1) {
        ElMessage.error(msg);
      } else {
        //打印后端获取的用户列表数据
        console.log(result.data.result)
        proxy.tableData = result.data.result
        console.log(proxy.tableData)
        // console.log(msg)
        // ElMessage.success({
        //   message:msg,type:'success'});

      }
    }).catch(() => {

      console.log("获取列表失败")
      const msg = "获取列表失败！请稍后尝试！";
      ElMessage.error(msg);
    })

    const searchbox = () => {
      proxy.searchshow = !proxy.searchshow
    }

    //查看团支书
    function handleView(index, row) {
      console.log(index, row)
      console.log("团支书ID："+row.mid)//获取mid
      proxy.tsId=row.mid
      console.log(proxy.tsId)
    }

    function costPlannedAmountChange(value){
      console.log(value)
      proxy.active=0
    }

    return{
      getAllStudentInfo,
      searchbox,
      stateStudent,
      handleClose,
      handleView,
      costPlannedAmountChange
    }
  }
}
</script>
<style>
.sear {
  overflow: hidden;
  width: 200px;
  background-color: rgb(245, 224, 224);
  margin-bottom: -9px;
  margin-left: 0px;
  border-radius: 30px;
}

/* 给过渡的name加样式 */

.mybox-leave-active,
.mybox-enter-active {
  transition: all 1s ease;
}

.mybox-leave-active,
.mybox-enter {
  width: 0px !important;
}

.mybox-leave,
.mybox-enter-active {
  width: 200px;
}

</style>
